import 'package:flutter/material.dart';
import 'package:flutter_demo/pages/page_with_title.dart';
import 'package:flutter_demo/widgets/app_widgets.dart';

class SliderPage extends PageWithTitle {
  const SliderPage({super.key}) : super("滑块(Slider)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return const [
      PrimaryTitle("简介"),
      BodyText("类似Android SeekBar，Flutter滑块组件用于在一组数据中拖动选择某个数值，类似"
          "可拖动选择进度的进度条，常用于实现播放进度、音量、均衡器之类的调节控制"),
      AppSpacer.large,
      _Example(),
      AppSpacer.large,
      UlItem("Slider"),
      BodyText("滑块组件，对比Android原生组件，它支持步长，但不支持拖拽到中间松手后自动按步长"
          "执行动画校准，其它的二级进度条用于显示缓冲进度等常见需求也是支持的，它本身是一个状态"
          "组件，但组件的当前进度并不是内部存储和更新，而是需要我们自己通过监听来重建组件。"),
      PrimaryHeaderLabelText(
          "value",
          "进度值，这是一个浮点型，默认的数值范围为[0,1]，不"
              "可以超出该范围"),
      PrimaryHeaderLabelText(
          "- secondaryTrackValue",
          "二级进度值，常用于展示缓冲进度，"
              "通常配置的颜色使用半透明"),
      PrimaryHeaderLabelText("- onChanged", "监听进度值更新"),
      PrimaryHeaderLabelText("- onChangeStart onChangeEnd", "用户开始、停止滑动滑块"),
      PrimaryHeaderLabelText("- min", "最小值"),
      PrimaryHeaderLabelText("- max", "最大值"),
      PrimaryHeaderLabelText(
          "- divisions",
          "离散分区数量，分区数*步长=最大值-最小值，比如想取[0,100]的自然数，类似Android原生"
              "那样使用，则可以设置最大最小值，然后设置分区数为100，我发现它有时也会出现小数，"
              "这个可能需要开发者在回调时也对它进行一个矫正"),
      PrimaryHeaderLabelText(
        "label",
        "按压时显示当前进度标签，必须设置divisions才会生效",
      ),
      PrimaryHeaderLabelText(
          "inactiveColor",
          "进度条背景色>",
          "主题配置sliderTheme.inactiveTrackColor>",
          "默认colorScheme.surfaceContainerHigh"),
      PrimaryHeaderLabelText("activeColor", "进度条颜色>",
          "主题配置sliderTheme.activeTrackColor>", "默认colorScheme.primary"),
      PrimaryHeaderLabelText(
          "secondaryActiveColor",
          "二级颜色（缓冲颜色）>",
          "主题配置sliderTheme.secondaryActiveTrackColor>",
          "默认colorScheme.primary采用0.45透明度"),
      PrimaryHeaderLabelText("thumbColor", "滑块按钮颜色>", "activeColor>",
          "主题配置sliderTheme.thumbColor>", "默认colorScheme.primary"),
      PrimaryHeaderLabelText(
          "overlayColor",
          "滑块按钮按压图层颜色>",
          "activeColor.withOpacity(0.12)>",
          "主题配置sliderTheme.overlayColor>",
          "默认colorScheme.primary，鼠标悬停时采用0.08透明度，按压拖拽时采用0.1透明度"),
      PrimaryHeaderLabelText(
          "mouseCursor",
          "鼠标指针类型，一般默认即可，在PC上鼠标悬停其上时会显示成可以抓握的图标"),
      PrimaryHeaderLabelText(
          "semanticFormatterCallback",
          "无障碍格式化回调，将进度值转化为用户可以理解的文本描述，参考label"),
      PrimaryHeaderLabelText("focusNode autofocus", "焦点控制"),
      PrimaryHeaderLabelText("allowedInteraction", "允许用户对滑块的操作方式"),
      LabelText("    - tapAndSlide，点击并滑动"),
      LabelText("    - tapOnly，点击"),
      LabelText("    - slideOnly，滑动"),
      LabelText("    - slideThumb，只能滑动滑块按钮"),
    ];
  }
}

class _Example extends StatelessWidget {
  const _Example();

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    var currProgress = 0.0;
    return StatefulBuilder(builder: (context, setState) {
      return Slider(
        value: currProgress,
        onChanged: (progress) {
          setState(() => currProgress = progress);
        },
        min: 0,
        max: 100,
        divisions: 5,
        label: "$currProgress",
        inactiveColor: theme.sliderTheme.inactiveTrackColor ??
            theme.colorScheme.surfaceContainerHigh,
        activeColor:
            theme.sliderTheme.activeTrackColor ?? theme.colorScheme.primary,
        secondaryActiveColor: theme.sliderTheme.secondaryActiveTrackColor ??
            theme.colorScheme.primary.withAlpha((0.45 * 255).toInt()),
        thumbColor: theme.sliderTheme.thumbColor ?? theme.colorScheme.primary,
        allowedInteraction: SliderInteraction.tapAndSlide,
      );
    });
  }
}
